<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--引入vue的js-->
    <script type="text/javascript" src="../js/vue.js"></script>
    <!--引入elementui的js之前必须引入vue的js-->
    <script type="text/javascript" src="../js/index.js"></script>
    <!--引入axios的js-->
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <!--引入elementui的css样式-->
    <link type="text/css" rel="stylesheet"  href="../css/index.css"/>

</head>
<body>

<div id="app">
    <!--搜索表单-->
    <!--inline: 在一行
        :model表示绑定表单对象
     -->
    <el-form :inline="true" :model="studentSearchForm" class="demo-form-inline">
        <el-form-item label="姓名">
            <el-input v-model="studentSearchForm.name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
            <el-input v-model="studentSearchForm.age" placeholder="年龄"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="initTable">搜索</el-button>
            <el-button  type="danger" @click="batchDelete" >批量删除</el-button>
        </el-form-item>
    </el-form>
    <!-- :data 引入vue中的变量tableData 必须为数组类型 -->
    <el-table
            :data="tableData"
            stripe
            @selection-change="handleSelectionChange"
            style="width: 100%">

        <!--复选框-->
        <el-table-column
                type="selection"
                width="30">
        </el-table-column>


        <el-table-column
                prop="sid"
                label="学生编号"
                width="100">
        </el-table-column>
        <el-table-column
                prop="name"
                label="学生姓名"
                width="100">
        </el-table-column>
        <el-table-column
                prop="age"
                label="年龄"
                width="100">
        </el-table-column>
        <el-table-column
                prop="class1.cname"
                label="班级名称"
                width="100">
        </el-table-column>

        <el-table-column
                fixed="right"
                label="操作">
            <template slot-scope="scope">
                <el-button type="success" plain class="el-icon-plus" @click="insetStudent(scope.row)" >添加</el-button>
                <el-button type="success" class="el-icon-edit" plain @click="editStudent(scope.row)" >编辑</el-button>
                <el-button type="danger" class="el-icon-delete" plain @click="del(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>


    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20,25,30]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <!--添加对话框-->
    <el-dialog
            title="添加学生"
            :visible.sync="dialogVisible2"
            width="30%">

        <el-form ref="form" :model="insertStudentForm" label-width="80px">
            <el-form-item label="姓名">
                <el-input v-model="insertStudentForm.name"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="insertStudentForm.age"></el-input>
            </el-form-item>
            <el-form-item label="班级名称">
                <el-select v-model="insertStudentForm.cid" placeholder="请选择">
                    <!--班级下拉框
                        classes:班级
                        :label 显示的字段 班级名称
                    -->
                    <el-option
                            v-for="item in classes"
                            :key="item.cid"
                            :label="item.cname"
                            :value="item.cid">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item size="large">
                <el-button type="primary" @click="insertStudents">添加</el-button>
                <el-button @click="dialogVisible2=false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!--编辑对话框
        dialogVisible：对话框的显示和隐藏
    -->
    <el-dialog
            title="修改"
            :visible.sync="dialogVisible"
            width="30%">

        <el-form ref="form" :model="editStudentForm" label-width="80px">
            <el-form-item label="姓名">
                <el-input v-model="editStudentForm.name"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="editStudentForm.age"></el-input>
            </el-form-item>
            <el-form-item label="班级名称">
                <el-select v-model="editStudentForm.cid" placeholder="请选择">
                    <!--班级下拉框
                        classes:班级
                        :label 显示的字段 班级名称
                    -->
                    <el-option
                            v-for="item in classes"
                            :key="item.cid"
                            :label="item.cname"
                            :value="item.cid">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item size="large">
                <el-button type="primary" @click="updateStudent">确认修改</el-button>
                <el-button @click="dialogVisible=false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>

</body>

<script>
    let app =new Vue({
        el:"#app",
        data:{
            dialogVisible:false,
            dialogVisible2:false,
            studentSearchForm:{},
            tableData:[],
            currentPage:1,
            pageSize:5,
            total:0,
            classes:[],
            editStudentForm:{},
            multipleSelection:[],
            ids:[],
            insertStudentForm:{}
        },

        //页面加载完毕后执行的方法
        created(){
            this.initTable();
            //查询所有班级
            this.loadAllClass();
        },
        methods:{
            //获取表格中选中的项
            handleSelectionChange(val){
                this.multipleSelection = val;
                console.log(this.multipleSelection);
            },
            //确认修改员工信息
            updateStudent(){
                axios.put("http://localhost:8080/student/updateStudent/",this.editStudentForm).then(result=>{
                    //console.log(result)
                    if(result.data.code===200){
                        this.$message.success(result.data.msg);
                        //关闭对话框
                        this.dialogVisible = false;
                        //刷新页面
                        this.initTable();
                    }
                })
            },
            //添加员工信息
            insertStudents(){
                axios.put("http://localhost:8080/student/saveStudent/",this.insertStudentForm).then(result=>{
                    if(result.data.code===200){
                        this.$message.success(result.data.msg);
                        //关闭对话框
                        this.dialogVisible2 = false;
                        //刷新页面
                        this.initTable();
                    }
                })
            },

            //批量删除
            batchDelete(){
                /*//stream
                this.ids = this.multipleSelection.map(item=>item.sid);*/
                axios.post("http://localhost:8080/student/batchDelete",this.multipleSelection).then(result=>{
                    if(result.data.code===200){
                        this.$message.success(result.data.msg);
                        //刷新页面
                        this.initTable();
                    }
                })
            },

            loadAllClass(){
                axios.get("http://localhost:8080/classes/findAll/").then(result=>{
                    console.log(result);
                    this.classes=result.data.data;
                })

            },
            initTable() {
                axios.post("http://localhost:8080/student/findAll/"+this.currentPage+"/"+this.pageSize,this.studentSearchForm).then(result=>{
                    this.tableData = result.data.data.data.records;
                    this.total = result.data.data.total;
                })
            },
            //改变每页的条数时 触发该事件
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize=val;
                this.initTable();
            },
            //改变当前页时 触发该事件
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage=val;
                this.initTable();
            },
            //删除员工
            del(row){
                //拿到一行数据
                //console.log(row)
                let sid = row.sid;
                axios.delete("http://localhost:8080/student/deleteStudent/"+sid).then(result=>{
                    //console.log(result)
                    if(result.data.code===200){
                        this.$message.success(result.data.msg)
                        this.initTable();
                    }
                })
            },
            //编辑学生信息
            editStudent(row){
                this.dialogVisible=true;
                this.editStudentForm=row;
            },
            //添加学生信息
            insetStudent(){
                this.dialogVisible2=true;
            }

        }
    })
</script>

</html>